<%@ page language="java" pageEncoding="UTF-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html>

        <head>
            <meta charset="utf-8" />
            <base href="${context}/" />
            <title>核对订单信息-${site}</title>
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <script>
                // 快递
                var kdpr = 0;
                // 手续
                var zf = 0;
                // 总价
                var totlprices = 0;
                window.addEventListener("load", function () {
                    if (document.getElementById("addressChecked").checked) {
                        let ch = document.getElementById("addressChecked");
                        ch.parentElement.style.color = "red";
                    }
                    // 获取商品页面总价格
                    var alltotl = document.getElementsByName('totl');

                    for (var int = 0; int < alltotl.length; int++) {
                        totlprices = totlprices + parseInt(alltotl[int].innerText);
                        console.info(alltotl[int].innerText);
                    }
                    // 初始快递费
                    if (document.getElementById("kd").checked) {
                        kdpr = document.getElementById("kd").parentElement.parentElement.nextElementSibling.childNodes[1].innerText;
                    }
                    console.log("快递：" + kdpr)
                    // 初始支付手续费
                    if (document.getElementById("yzf").checked) {
                        zf = document.getElementById("yzf").parentElement.parentElement.nextElementSibling.childNodes[1].innerText;
                    }
                    console.log("手续：" + zf)
                    //初始商品总价
                    document.getElementById("flagTatol").innerText = totlprices;
                    //初始运费
                    document.getElementById("delivery_fee_show").innerText = kdpr;
                    //初始手续费
                    document.getElementById("sxf").innerText = zf;
                    let allprices = parseInt(zf) + parseInt(kdpr) + parseInt(totlprices);
                    //初始总价
                    document.getElementById("final_sum").innerText = allprices;
                })
                // 获取选择的地址
                function address(e) {
                    let p = e.parentElement.parentElement.parentElement;
                    let shr = e.nextElementSibling.nextElementSibling;
                    let shdz = e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;
                    let tel = e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;
                    document.getElementById("consignee").value = shr.innerText;
                    document.getElementById("province").value = shdz.innerText;
                    document.getElementById("tel").value = tel.innerText;
                }
                // 配送方式点击事件
                function getprice(e) {
                    console.log("kdpr:" + kdpr)
                    kdpr = e.parentElement.parentElement.nextElementSibling.childNodes[1].innerText;
                    document.getElementById("delivery_fee_show").innerText = kdpr;

                    changeAllprices();
                    console.log("配送方式点击事件：价格：" + kdpr)
                }
                // 手续费点击事件
                function getpricesx(e) {
                    zf = e.parentElement.parentElement.nextElementSibling.childNodes[1].innerText;
                    document.getElementById("sxf").innerText = zf;
                    changeAllprices();
                    console.log("配送方式点击事件：价格：" + zf)
                }
                //修改总价
                function changeAllprices() {
                    let allprices = parseInt(zf) + parseInt(kdpr) + parseInt(totlprices);
                    document.getElementById("final_sum").innerText = allprices;
                }
            </script>
        </head>

        <body class="second">
            <div class="brand_list container_2">
                <jsp:include page="header.jsp" />
                <div class="wrapper clearfix">
                    <div class="position mt_10">
                        <span>您当前的位置：</span> <a href=""> 首页</a> » 填写核对订单信息
                    </div>
                    <div class="myshopping m_10">
                        <ul class="order_step">
                            <li class="current_prev"><span class="first"><a
                                        href='javascript:window.history.go(-1);'>1、查看购物车</a></span></li>
                            <li class="current"><span>2、填写核对订单信息</span></li>
                            <li class="last"><span>3、成功提交订单</span></li>
                        </ul>
                    </div>

                    <form action='order?opr=submit' method='post' name='order_form'>
                        <div class="cart_box m_10">
                            <div class="title">填写核对订单信息</div>
                            <div class="cont">

                                <!--地址管理 开始-->
                                <div class="wrap_box">
                                    <h3>
                                        <span class="orange">收货人信息</span>
                                    </h3>
                                    <!--收货表单信息 开始-->
                                    <div class="prompt_4 m_10" id='address_often'>
                                        <strong>常用收货地址</strong>
                                        <ul class="addr_list">
                                            <c:forEach items="${addressList}" var="address">
                                                <li>
                                                    <label>
                                                        <input id="addressChecked" class="radio" name="addressOrder"
                                                            onclick="address(this)" type="radio" value="" <c:if
                                                            test="${address.state==2}">
                                                        checked </c:if> >
                                                        <span style="font-weight: bold">收货人：
                                                        </span><span>${address.consignee}</span>
                                                        <span style="font-weight: bold;margin-left: 50px;">收货地址：
                                                        </span> <span>${address.province}
                                                            - ${address.city} - ${address.area} -
                                                            ${address.street}</span>
                                                        <span style="font-weight: bold;margin-left: 50px;">手机号：
                                                        </span> <span>${address.tel}</span>
                                                    </label>
                                                </li>

                                            </c:forEach>
                                        </ul>
                                        <input type="hidden" value="${addressList[0].consignee}" id="consignee"
                                            name="consignee">
                                        <input type="hidden" name="province"
                                            value="${addressList[0].province} - ${addressList[0].city} - ${addressList[0].area} - ${addressList[0].street}"
                                            id="province">
                                        <input type="hidden" value="${addressList[0].tel}" id="tel" name="tel">
                                        <input type="hidden" value="${sessionScope.USER.id}" id="uid" name="uid">

                                    </div>
                                </div>
                                <!--地址管理 结束-->
                                <div class="wrap_box" id="deliveryBox">
                                    <h3>
                                        <span class="orange">配送方式</span>
                                    </h3>
                                    <!--配送修改 开始-->
                                    <table width="100%" class="border_table m_10" id="delivery_form"
                                        style="display: table;">
                                        <colgroup>
                                            <col width="180px">
                                            <col>
                                        </colgroup>
                                        <tbody id="deliveryFormTrBox">
                                            <tr>
                                                <th><label><input type="radio" name="order.deliveryType" paytype="0"
                                                            id="kd" alt="20.00" value="快递" checked
                                                            onclick="getprice(this)">快递</label></th>
                                                <td>直接由第三方物流公司配送 运费：￥<span>20.00</span> &nbsp;&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <th><label><input type="radio" name="order.deliveryType" paytype="0"
                                                            onclick="getprice(this)" id="EMS" alt="10.00"
                                                            value="EMS">EMS</label></th>
                                                <td>运费：￥<span>10.00</span> &nbsp;&nbsp;</td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>指定送货时间：</th>
                                                <td><label class="attr"><input type="radio" name="order.deliveryTime"
                                                            checked="checked" value="任意">任意</label>
                                                    <label class="attr"><input type="radio" name="order.deliveryTime"
                                                            value="周一到周五">周一到周五</label>
                                                    <label class="attr"><input type="radio" name="order.deliveryTime"
                                                            value="周末">周末</label>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <!--配送修改 结束-->
                                </div>
                                <!--配送方式 结束-->

                                <!--支付方式 开始-->
                                <div class="wrap_box" id='paymentBox'>
                                    <h3>
                                        <span class="orange">支付方式</span>
                                    </h3>

                                    <table width="100%" class="border_table" id='payment_form'>
                                        <col width="200px" />
                                        <col />

                                        <tr>
                                            <th><label><input class="radio" name="payType" alt="0" title="预存款支付"
                                                        onclick="getpricesx(this)" id="yzf" type="radio" value="预存款支付"
                                                        checked />预存款支付</label></th>
                                            <td>支付手续费：￥<span>0</span></td>
                                        </tr>
                                        <tr>
                                            <th><label><input class="radio" name="payType" alt="0" title="支付宝" id="zfb"
                                                        onclick="getpricesx(this)" type="radio"
                                                        value="支付宝" />支付宝</label></th>
                                            <td>支付手续费：￥<span>5</span></td>
                                        </tr>
                                        <tr>
                                            <th><label><input class="radio" name="payType" alt="0" title="货到付款"
                                                        onclick="getpricesx(this)" id="hdfk" type="radio"
                                                        value="货到付款" />货到付款</label></th>
                                            <td>支付手续费：￥<span>2</span></td>
                                        </tr>
                                    </table>
                                </div>
                                <!--支付方式 结束-->
                                <!--购买清单 开始-->
                                <div class="wrap_box">
                                    <h3>
                                        <span class="orange">购买的商品</span>
                                    </h3>

                                    <table width="100%" class="cart_table t_c">
                                        <col width="115px" />
                                        <col />
                                        <col width="80px" />
                                        <col width="80px" />
                                        <col width="80px" />

                                        <thead>
                                            <tr>
                                                <th>图片</th>
                                                <th>商品名称</th>
                                                <th>单价</th>
                                                <th>数量</th>
                                                <th class="last">小计</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <c:forEach items="${goodsList}" var="goods">
                                                <tr>
                                                    <td><img src="${goods.img}" width="66px" height="66px" /></td>
                                                    <td class="t_l"><a href="" class="blue">${goods.bookName}</a></td>
                                                    <td>￥<b>${goods.sellingPrice}</b></td>
                                                    <td>${goods.stock}</td>
                                                    <td>￥<b class="red2" name="totl">${goods.sellingPrice*goods.stock}</b></td>
                                                </tr>
                                                <input type="hidden" value="${goods.id}" name="gid">
                                                <input type="hidden" value="${goods.stock}" name="nums">
                                            </c:forEach>
                                            <!-- 商品展示 结束-->

                                        </tbody>
                                    </table>
                                </div>
                                <!--购买清单 结束-->

                            </div>
                        </div>

                        <!--金额结算-->
                        <div class="cart_box" id='amountBox'>
                            <div class="cont_2">
                                <strong>结算信息</strong>
                                <div class="pink_box">
                                    <p class="f14 t_l">
                                        商品总金额：<b id="flagTatol"></b> + 运费总计：<b id='delivery_fee_show'>0.00</b> +
                                        手续费总计：<b id='sxf'>0.00</b>
                                    </p>
                                </div>
                                <hr class="dashed" />
                                <div class="pink_box gray m_10">
                                    <table width="100%" class="form_table t_l">
                                        <col width="220px" />
                                        <col />
                                        <!-- <col width="250px" /> -->
                                        <tr>
                                            <td class="t_r"><b class="price f14">应付总额：<span class="red2">￥<b
                                                            id='final_sum'></b></span>元
                                                </b></td>
                                        </tr>
                                    </table>
                                </div>
                                <p class="m_10 t_r">
                                    <input type="submit" class="submit_order" />
                                </p>
                            </div>
                        </div>

                    </form>

                </div>
                <!-- 弹窗代码开始  -->
                <div class="web_notice" id="msgdiv"
                    style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;">
                    <div id="msg"
                        style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
                        <h3 style="font-weight: bold;text-align: center;font-size: 30px;">订单提交失败</h3>
                        <div
                            style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(184, 113, 113); text-align: center;">
                            ${msg}
                        </div><a
                            style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin: 0 auto;margin-top: 45px;border-radius: 32px;width: 80%;"
                            onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</a>
                    </div>
                </div>
                <!-- 弹窗代码结束  -->

                <jsp:include page="footer.jsp" />
            </div>
            <style>
                #msg,
                #msgdiv {
                    display: none;
                }

                /* 弹窗动画 */
                #msg {
                    -webkit-animation: fadeleftIn .4s;
                    animation: fadeleftIn .4s;
                    -webkit-animation-name: popIn;
                    animation-name: popIn;
                }

                @-webkit-keyframes popIn {
                    0% {
                        -webkit-transform: scale3d(0, 0, 0);
                        transform: scale3d(0.5, 0.5, 0.5);
                        opacity: 0;
                    }

                    50% {
                        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                    }

                    100% {
                        -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
                        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                        opacity: 1;
                    }
                }

                @keyframes popIn {
                    0% {
                        -webkit-transform: scale3d(0, 0, 0);
                        transform: scale3d(0.5, 0.5, 0.5);
                        opacity: 0;
                    }

                    50% {
                        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                    }

                    100% {
                        /* -webkit-transform: scale3d(1, 1, 1); */
                        /* transform: scale3d(1, 1, 1); */
                        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                        opacity: 1;
                    }
                }
            </style>
            <script>
                window.addEventListener("load", function () {
                    if (${ msg != null }){
                    document.getElementById("msg").style.display = "block";
                    document.getElementById("msgdiv").style.display = "block";
                }
				})
            </script>
        </body>

        </html>